<script setup>
import {router} from "@/router";
import {defineProps} from "vue";
import {Right} from "@element-plus/icons-vue";
const Returnpage = () => {
  router.push('/')
}
const fanhui = () => {
  router.push('/visualization')
}
const fanhuis = () => {
  router.push('/index/dashboard')
}
const props = defineProps({
  title: {
    type: String,
    default: ''
  }
})
</script>

<template>
  <div class="header">
    <img src="../visualization/Image/home.png" @click="Returnpage" class="hover-imag">
    <div class="title">{{props.title}}</div>
    <div v-if="title!=='系统数据可视化'" style="margin-top: 5px">
      <el-icon @click="fanhui"><Back /></el-icon>
    </div>
    <div v-else style="margin-top: 5px;margin-right: 10px">
      <el-icon @click="fanhuis"><Right /></el-icon>
    </div>
  </div>
</template>

<style scoped lang="scss">
.header {
  display: flex;
  justify-content: space-between; /* 左右分隔 */
  height: 100px;
  background: url("../visualization/Image/2_画板_1_u2.png");
  background-size: cover;
  font-size: 30px;
  font-weight: bold;
  color: white;
}
.hover-imag{
  height: 35px;
  width: 35px;
  margin-top: 4px;
  margin-left: 20px;
}
.title {
  margin-right: 20px; /* 控制标题右侧间距 */
  flex-grow: 1; /* 使标题占据剩余空间 */
  text-align: center; /* 标题文本居中 */
  margin-top: 10px;
}
</style>
